<template>
	
	
	<view class="uni-tab-bar" :style="{height:swiperheight+'px'}">
		
		<swiper class="swiper-box" :current="tabIndex" @change="tabChange">
			<!-- 关注 -->
			<swiper-item>
				<scroll-view scroll-y="true" class="list" @scrolltolower="loadmore">
	
	
	
	
					<template>
						<block v-for="(item,index) in guanzhu.list " :key='index'>
							<CommonList :item='item' :index='index'></CommonList>
	
						</block>
	
	
						<!-- <LoadMore> 加载更多</LoadMore>		 -->
						<LoadMore :loadText='guanzhu.loadtext'> </LoadMore>
					</template>
	
	
	
				</scroll-view>
			</swiper-item>
	
	
	
			<!-- 话题 -->
			<swiper-item>
				<scroll-view scroll-y="true" class="list" @scrolltolower="loadmore">
	
					<!-- uniapp 第一个地方 遍历的时候  尽量不要在view  而是在block 上遍历
					 
					 第二个地方  判断  v-if  指令的使用 我们推荐使用template  上去使用
					 -->
					 

	
					<template>
						<!-- <block v-for="(item,index) in guanzhu.list " :key='index'>
							<CommonList :item='item' :index='index'></CommonList>
	
						</block> -->
						
						<!--  搜索  -->
					
						<view class="search-input">
							<input class="uni-input" placeholder-class="icon iconfont icon-sousuo topic-search"
								placeholder="搜索内容话题" />
						</view>
							
						
						<!-- 轮播图 -->

						<swiper class="topic-swiper" :indicator-dots="true" :autoplay="true" :interval="3000"
							:duration="1000">
							<!-- 遍历 尽量 在block  身上遍历  -->
							<block  v-for="(item,index) in topic.swiper" :key="index">
								<swiper-item>
									<image :src="item.src" mode="widthFix" lazy-load></image>
								</swiper-item>
							</block>
						</swiper>
						<!-- 热门分类 -->
						
						<!-- 热门分类 -->
						<TopicNav :nav="topic.nav"></TopicNav>
						
						<!-- 列表展示 -->
					<view class="topic-new">
						<view>最近更新</view>
						<block v-for="(item,index) in topic.list" :key="index">
							<TopicList :item="item" :index="index"></TopicList>
						</block>
					</view>
						
						
						
						
						
						
						
						
	
	
						<!-- <LoadMore> 加载更多</LoadMore>		 -->
						<LoadMore :loadText='guanzhu.loadtext'> </LoadMore>
					</template>
	
	
	
				</scroll-view>
			</swiper-item>
	
		</swiper>
	
	
	
	
	
	
	
	</view>
</template>

<script>
	
	import CommonList from '../../components/common/common-list.vue'
	import  LoadMore  from '../../components/common/load-more.vue'
	
	import  TopicNav from '../../components/news/topic-nav.vue'
	
	
	import  TopicList  from '../../components/news/topic-list.vue'
	
	
	
	
	  export  default  {
		  
		  props:{
			  guanzhu:Object,
			  tabIndex:Number
		  },
		  components:{
			  LoadMore,
			  CommonList,
			  TopicNav,
			  TopicList
		  },
		  data() {
			  return {
				  swiperheight: 500, //设置初始化高度，
				  
				  //轮播图数据
				  topic: {
				  	swiper: [{
				  			src: "../../static/demo/banner2.jpg"
				  		},
				  		{
				  			src: "../../static/demo/banner2.jpg"
				  		},
				  		{
				  			src: "../../static/demo/banner2.jpg"
				  		},
				  	],
					nav: [{
							name: "最新"
						},
						{
							name: "游戏"
						},
						{
							name: "打卡"
						},
						{
							name: "情感"
						},
						{
							name: "故事"
						},
						{
							name: "喜爱"
						},
					],
					// 添加list数据
					list:[
											{
												titlepic:"../../static/demo/topicpic/13.jpeg",
												title:"话题名称",
												desc:"我是话题描述",
												totalnum:50,
												todaynum:10
											},
											{
												titlepic:"../../static/demo/topicpic/13.jpeg",
												title:"话题名称",
												desc:"我是话题描述",
												totalnum:50,
												todaynum:10
											},
											{
												titlepic:"../../static/demo/topicpic/13.jpeg",
												title:"话题名称",
												desc:"我是话题描述",
												totalnum:50,
												todaynum:10
											},
											{
												titlepic:"../../static/demo/topicpic/13.jpeg",
												title:"话题名称",
												desc:"我是话题描述",
												totalnum:50,
												todaynum:10
											},
											{
												titlepic:"../../static/demo/topicpic/13.jpeg",
												title:"话题名称",
												desc:"我是话题描述",
												totalnum:50,
												todaynum:10
											},
											{
												titlepic:"../../static/demo/topicpic/13.jpeg",
												title:"话题名称",
												desc:"我是话题描述",
												totalnum:50,
												todaynum:10
											}
										]
					
			  }
		  }
		  
		  },
		  methods:{
			  tabChange(e) {
			  	console.log(e.detail)
			  	// this.tabIndex = e.detail.current
				this.$emit('TabChangeIndex',e.detail.current)
			  
			  },
			  
			  loadmore() {
			  	//滚动到底部准备进去加载更多
			  
			  	//进行逻辑优化判断 
			  	var loadtext = this.guanzhu.loadtext;
			  
			  	if (loadtext !== '上拉加载更多') return false
			  
			   this.guanzhu.loadtext='正在加载中...'
			  
			  
			  	setTimeout(() => {
			  		let obj = {
			  			
			  				userpic: "../../static/demo/userpic/12.jpg",
			  				username: "哈哈",
			  				sex: 0, //0 男 1 女
			  				age: 25,
			  				isguanzhu: false,
			  				title: "我是标题",
			  				titlepic: "",
			  				video: false,
			  				share: false,
			  				path: "深圳 龙岗",
			  				sharenum: 20,
			  				commentnum: 30,
			  				goodnum: 20
			  			}
			  		
			  
			  		this.guanzhu.list.push(obj)
			  
			  		this.guanzhu.loadtext = '上拉加载更多'
			  	}, 1000)
			  
			  
			  	// this.newslist[index].loadtext='没有更多数据了'
			  
			  }
			  
			  
			
			 
		  }
		  
	  }
	
	
	
	
</script>

<style  scoped>



.search-input {
		padding: 20upx;
	}

	.search-input>input {
		background: #F4F4F4;
		border-radius: 10upx;
	}

	.topic-search {
		display: flex;
		justify-content: center;
		font-size: 27upx;
	}


	.topic-swiper {
		padding: 0 20upx 20upx 20upx;
	}

	.topic-swiper image {
		width: 100%;
		border-radius: 10upx;
	}
	
	
	.topic-new{
		padding: 20upx;
	}
	.topic-new>view:first-child{
		padding-bottom: 5upx;
		font-size: 32upx;
	}
</style>
